<template>
  <div >
    <!--上半部分-->
    <el-row :gutter="20" class="home">
      <el-col :span="8">
        <!--大头像-->
        <el-card class="box-card" shadow="hover">
          <div slot="header" class="clearfix">
            <el-avatar :size='120' class="left-img" :src="userImg"></el-avatar>
            <div class="userInfo">
              <p class="userName">Admin</p>
              <p class="userName level">菜鸡管理员</p>
            </div>
          </div>
          <div class="text item">
            <p class="login">上次登录时间 : </p>
            <span>2022.3.27</span> <br>
            <p class="login">上次登录地点 : </p>
            <span>嘿嘿</span>
          </div>
        </el-card>
      </el-col>
      <!--卡片-->
      <el-col :span="16">
        <div class="grid-content bg-purple-light num">
          <TestCard  v-for="item in countData" :key="item.name" :item="item"/>

          <!--<el-card class="box-card" v-for="item in countData" :key="item.name" :body-style="{display:'flex', padding:0 }">-->
          <!--  <i class="icon" :style="{backgroundColor:item.color}" :class="`el-icon-${item.icon}`"></i>-->
          <!-- <div class="detail">-->
          <!--   <p class="price" >￥{{item.value}}</p>-->
          <!--   <p class="order">{{item.name}}</p>-->
          <!-- </div>-->
          <!--</el-card>-->

        </div>
      </el-col>
    </el-row>
    <!--下半部分-->
    <el-row :gutter="20">
      <el-col :span="8">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <el-table :data="tableList" style="width: 100%" >
              <el-table-column prop="name" align="center" label="日期" ></el-table-column>
              <el-table-column prop="totalBuy" align="center" label="总购买"></el-table-column>
              <el-table-column prop="monthBuy" align="center" label="本月购买"></el-table-column>
              <el-table-column prop="todayBuy" align="center" label="今日购买"></el-table-column>
            </el-table>
          </div>
        </el-card>
      </el-col>
      <!--右中-->
      <el-col :span="16" style="margin-top: -60px">
        <div class="grid-content bg-purple-light">
          <el-card class="box-card">
            <div style="height: 200px;width:100%" ref="orderCharts"></div>
          </el-card>
        </div>
        <!--右下-->
        <div style="margin-top: 10px;padding: 0;">
          <el-col :span="12" style="padding-left: 0">
            <el-card class="box-card">
              <div style="height: 200px;width:100%" ref="userCharts"></div>
            </el-card>
          </el-col>
          <el-col :span="12" style="padding-right: 0">
            <el-card class="box-card">
              <div style="height: 200px;width:100%" ref="pieCharts"></div>
            </el-card>
          </el-col>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import PayCard from '@/components/PayCard'
import TestCard from '@/components/TestCard'
export default {
  name: 'home',
  components:{PayCard,TestCard},
  data(){
    return{
      //大头像
      userImg:require('../../assets/images/qqnc.png'),
      //左侧表格
      tableList:[
      {
        name: 'oppo',
        todayBuy: 100,
        monthBuy: 300,
        totalBuy: 2400
      },
      {
        name: 'vivo',
        todayBuy: 100,
        monthBuy: 300,
        totalBuy: 5100
      },
      {
        name: '苹果',
        todayBuy: 100,
        monthBuy: 300,
        totalBuy: 2400
      },
      {
        name: '小米',
        todayBuy: 100,
        monthBuy: 300,
        totalBuy: 43435
      },
      {
        name: '三星',
        todayBuy: 100,
        monthBuy: 300,
        totalBuy: 12500
      },
      {
        name: '魅族',
        todayBuy: 100,
        monthBuy: 300,
        totalBuy: 12400
      }
    ],
      //数据
      countData: [
        {
          name: "今日支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "今日收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "今日未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
        {
          name: "本月支付订单",
          value: 1234,
          icon: "success",
          color: "#2ec7c9",
        },
        {
          name: "本月收藏订单",
          value: 210,
          icon: "star-on",
          color: "#ffb980",
        },
        {
          name: "本月未支付订单",
          value: 1234,
          icon: "s-goods",
          color: "#5ab1ef",
        },
      ],
    }
  },
  mounted() {
    this.getData()
  },
  methods:{
    async getData() {
      let res = await this.$API.getHome()
      //折线图数据
      let legend = Object.keys(res.data.orderData.data[0])
      let xAxis = res.data.orderData.date
      let data = res.data.orderData.data
      let series = []
      legend.forEach(item=>{
        series.push({
          name:item,
          type:'line',
          data:data.map(value => value[item])
        })
      })
      //折则线图
      echarts.init(this.$refs.orderCharts).setOption({
        tooltip: {},
        legend: {
          data: legend
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis: {
          type: 'category',
          boundaryGap: false,
          data:xAxis
        },
        yAxis: {
          type: 'value'
        },
        series: series
      })
      //柱状图数据
      let userData = res.data.userData
      let active = []
      let newUser = []
      let legendUser = []
      userData.forEach(item=>{
        active.push(item.active)
        newUser.push(item.new)
        legendUser.push(item.date)
      })
      //柱状图
      echarts.init(this.$refs.userCharts).setOption({
        xAxis: {
          type: 'category',
          data: legendUser
        },
        yAxis: {
          type: 'value'
        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        legend: {
          data: ['活跃用户','新增用户']
        },
        series: [
          {
            name:'活跃用户',
            data: active,
            type: 'bar'
          },
          {
            name:'新增用户',
            data: newUser,
            type: 'bar'
          }
        ]
      })
      //饼图数据
      let videoData = res.data.videoData
      //饼图
      echarts.init(this.$refs.pieCharts).setOption({
        tooltip: {
          trigger: 'item'
        },
        series: [
          {
            type: 'pie',
            radius: '80%',
            data: videoData,
          }
        ]
      })
    }
  }
}
</script>

<style lang="less" scoped>
.order{
  padding-left: 16px;
  font-size: 14px;
  text-align: center;
  color:#999999;

}
.price{
  display: block;
  padding: 10px;
  font-size: 2em;
}
.icon{
  text-align: center;
  font-size: 30px;
  height:100px;
  width:100px;
  display: inline-block;
  margin:0;
  padding:0;
}

.item span{
  padding-left: 40px;
  font-size: 14px;
  color: #999999;

}
.login{
  font-size: 14px;
  line-height: 1.5;
  color: #999999;
  display: inline-block;
}
.userInfo{
  margin-left: 155px;
  padding-top:33px
}
.userName{
  font-size:2em;
  line-height:1;
}
.level{
  font-size: 1em;
  color: #999999;
  margin-left: 5px;
}
.left-img{
  float: left;
}
.el-row {
  margin-bottom: 20px;

&:last-child {
  margin-bottom: 0;
}

}
.el-col {
  border-radius: 4px;
}

.bg-purple-dark {
  background: #99a9bf;
}

.bg-purple {
  background: #d3dce6;
}

.bg-purple-light {
  background: #e5e9f2;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}

.row-bg {
  padding: 10px 0;
  background-color: #f9fafc;
}
</style>
